import React from "react";
import "./style.scss";
import { Input, Button, message } from "antd";
import classNames from "classnames";

class Login extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            checked: false
        };
        this.handleChecked = this.handleChecked.bind(this);
    }

    // 切换登录信息
    handleChecked() {
        this.setState(prevState => {
            return {
                checked: !prevState.checked
            };
        });
    }

    handleLogin = () => {
        // 登录信息校验等操作
        message.info("无后台校验-登录成功");
        this.props.history.push("/main/home");
    };

    render() {
        const { checked } = this.state;
        const checkedClass = classNames({
            checkbox: true,
            checked: checked
        });
        return (
            <div className="login">
                <div className="login-form">
                    <h3>涉纵型金融APP风险监测平台</h3>
                    <h3>用户登录</h3>
                    <div className="login-user">
                        <label>用户名</label>
                        <Input placeholder="请输入用户名/邮箱" />
                    </div>
                    <div className="login-user">
                        <label>密码</label>
                        <Input placeholder="请输入密码" />
                    </div>
                    <div className="login-user check">
                        <i className={checkedClass} onClick={this.handleChecked} />
                        <span>保持登录信息</span>
                    </div>
                    <div className="login-user">
                        <Button className="login-btn" type="primary" onClick={this.handleLogin}>
                            登录
                        </Button>
                    </div>
                    <div className="login-user center">
                        <span className="center">如果登录出现异常，请清理浏览器缓存后再尝试</span>
                    </div>
                    <div className="login-user tipInfo">
                        <a href="/">没有账户？请联系管理员开通账户</a>
                    </div>
                </div>
            </div>
        );
    }
}

export default Login;
